<template>
<div class="app">
        <div class="shopcart"  v-show="visible" @click="changevisible">
        <div class="content" @click.stop="handlecliclk">
            <div class="title">
                <span>已选商品</span>
                <span @click="clean">清空</span>
            </div>
            <div v-if="shopcartlist.length != 0" class="list">
                <div v-for="(item,index) in shopcartlist" :key="index" class="good">
                    <div class="imgbox">
                        <img :src="item.picture" alt="">
                    </div>
                    <div class="text">
                        <div class="name">{{item.name}}</div>
                        <div class="price">
                            <div>¥{{item.min_price}}</div>
                            <div>
                                <span @click="sub(item)">-</span>
                                <span>{{item.count}}</span>
                                <span @click="add(item)">+</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else class="empty" >购物车空空如也,去逛逛!</div>
            </div>
        </div>
    </div>
        

</template>

<script>
import { mapState, mapActions ,mapGetters} from 'vuex';

export default {
    data(){
        return{
        visible:false,
        list:[
            // {name:"迪丽热巴",price:50,count:1,},
            // {name:"古力娜扎",price:20,count:1,},
            // {name:"杨幂",price:40,count:1,},
           ],
        }
    },
    computed:{
        ...mapState(['shopcartlist']),
        ...mapGetters(['totalCount','totalPrice']),
    },
     methods:{
         ...mapActions(['request_shopcartclear']),
        changevisible(){
            this.visible = !this.visible;//让购物车显示隐藏
        },
        sub(item){
            if(item.count>1){
                item.count--;  
            }      
        },
        add(item){
            item.count++;
        },         
        clean(){
            this.request_shopcartclear();
        },
        handlecliclk(){
            // console.log('触发了');
        }
    },
    // computed:{
    //     totalCount(){
    //        var sum =0;
    //        this.list.forEach((item)=>{
    //            sum += item.count;
    //        });
    //        return sum;
    //     },
    //     totalPrice(){
    //         var smm =0;
    //         this.list.forEach((item)=>{
    //             smm += item.count * item.jiage;
    //         });
    //         return smm;
    //     }
    // }   
        
    

}
</script>

<style lang="scss" scoped>
.shopcart{
    position: fixed;
    bottom: 0;
    background-color: white;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}
.content{
    position: fixed;
    bottom: 0;
    left: 0;
    height: 315px;
    background-color: white;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}
.content .title{
    display: flex;
    justify-content: space-between;
    font-weight: bold;
}
.content .list .good{
    display: flex;
    margin: 10px 0;
}
.content .list .good .imgbox{
    width: 80px;
    margin-right: 10px;
}
.content .list .good .imgbox img{
    width: 100%;
}
.content .list .good .text{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.content .list .good .text .name{
    font-weight: bold;
}
.content .list .good .text .price{
    display: flex;
    justify-content: space-between;
}
.content .list .good .text .price span{
    display: inline-block;
    width: 14px;
    height: 14px;
    text-align: center;
    line-height: 14px;
    background-color: lightskyblue;
    color: white;
    border-radius: 50%;
}
.content .list .good .text .price span:nth-child(2){
    color: black;
    background-color: white;
}
.empty{
    text-align: center;
    padding: 50px;
}
// .shop{
//     height: 100%;
//     width: 100%;
//     position: fixed;
//     background-color: rgba(0,0,0,0.3);
// }
// .bigbox{
// width: 100%;
// height: 380px;
// background-color:#f5f5f5;
// position: fixed;
// bottom: 0px;
// margin-bottom: 30px;
// }
// .bigbox .good{
// display: flex;
// justify-content: space-between;
// }
// .bigbox .good div{
// font-weight: bold;
// margin: 10px ;
// }
// .shpi .xiangq .jia{
// display: flex;
// justify-content: space-between;
// align-items: center;
// }
// .bigbox>.shpi>.xiangq>.jia>.qun>span:nth-child(1){
// width: 20px;
// background-color: rgb(104, 189, 238);
// display:inline-block;
// height: 20px;
// text-align: center;
// border-radius: 50%;
// line-height: 20px;
// }
// .bigbox>.shpi>.xiangq>.jia>.qun>span:nth-child(3){
// width: 20px;
// background-color: rgb(104, 189, 238);
// display:inline-block;
// height: 20px;
// text-align: center;
// border-radius: 50%;
// line-height: 20px;
// }
// .bigbox>.shpi{
// display: flex;
// }
// .bigbox>.shpi>.imgbox>img{
// width: 100px;
// height: 100px;
// }
// .bigbox>.shpi>.xiangq>.jia{
// margin-top: 50px;          
// }
// .bigbox>.shpi>.xiangq>.jia>.jiage{
// margin-right: 160px;
// }
// .bigbox.dibu{
// width: 100%;
// height: 50px;
// background-color: rgb(221, 108, 108);
// }
// .bigbox .empty{
// width: 100%;
// height: 100px;
// text-align: center;
// line-height: 180px;
// }
// .jisuan{
// display: flex;
// justify-content: space-between;
// align-items: center;
// background-color: #555;
// color: white;
// left: 0;
// position: fixed;
// bottom: 0;
// width: 100%;
// padding: 10px;
// box-sizing: border-box;
// }
// .jisuan span:nth-child(2){
// background-color: lightgreen;
// color: white;
// padding: 5px 15px;
// border-radius: 5px;
// }
</style>